<template>
	<!-- 地区选择 -->
	<u-popup mode="right" :show="isShow">
		<scroll-view scroll-y="true">
			<view>
				<view class="t1">
					<view class="t2">
						<view style="color: #84C0F4;">商圈</view>
						<view>地铁</view>
					</view>
					<view class="t3">
						<view style="color: #84C0F4;">全广州</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
					</view>
					<view class="t4">
						<view style="color: #84C0F4;">全广州</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
						<view>天河区</view>
					</view>
				</view>
				<view class="t5">
					<view class="t6" @click="cancle()">取消</view>
					<view class="t7">确定</view>
				</view>
			</view>
		</scroll-view>
	</u-popup>
</template>

<script>
export default {
	props: {
		value: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {}
	},
	computed: {
		isShow: {
			get() {
				return this.value
			},
			set(val) {
				this.$emit('input', val)
			}
		}
	},
	methods: {
		cancle() {
			this.isShow = false
		},
		rightClick() {
			console.log('rightClick')
		},
		leftClick() {
			console.log('leftClick')
		}
	}
}
</script>
<style lang="scss" scoped>
.pupupS {
	width: 100%;
}
.t1 {
	display: flex;
	border-top: 1upx solid #999;
	height: 100%;
	.t2 {
		width: 160upx;
		background: #f9f9f9;
		font-size: 32upx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #323233;
		view {
			width: 160upx;
			height: 96upx;
			line-height: 96upx;
			text-align: center;
		}
	}
	.t3 {
		width: 230upx;
		border-right: 2upx solid #dddddd;
		view {
			width: 230upx;
			height: 96upx;
			line-height: 96upx;
			text-align: center;
			font-size: 32upx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #323233;
		}
	}
	.t4 {
		width: 100%;
		view {
			width: 100%;
			text-align: center;
			height: 96upx;
			line-height: 96upx;

			font-size: 32upx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #323233;
		}
	}
}
.t5 {
	width: 100%;
	height: 144upx;
	background: #ffffff;
	border-radius: 0px 0px 0px 0px;
	opacity: 1;
	border: 2upx solid #dddddd;
	padding-left: 32upx;
	display: flex;
	position: fixed;
	bottom: 0;
	.t6 {
		margin-top: 28upx;
		width: 248upx;
		height: 88upx;
		opacity: 1;
		background: #f4f4f4;
		border-radius: 8upx;
		font-size: 30upx;
		font-family: Source Han Sans SC-Medium, Source Han Sans SC;
		font-weight: 500;
		color: #666666;
		text-align: center;
		line-height: 88upx;
	}
	.t7 {
		margin-top: 28upx;
		margin-left: 18upx;
		width: 408upx;
		height: 88upx;
		background: #84c0f4;
		border-radius: 8upx;
		opacity: 1;
		font-size: 30upx;
		font-family: Source Han Sans SC-Medium, Source Han Sans SC;
		font-weight: 500;
		color: #ffffff;
		text-align: center;
		line-height: 88upx;
	}
}
</style>
